<template>
  <div>
    <div class="add appBox">

      <div class="top flex_sb">
        <div class="flex left">
          <div class="cup flex"
               @click="back">
            <el-icon size="18">
              <Back />
            </el-icon>
            <div class="ruturn">返回</div>
          </div>
          <div class="title">查看资料</div>
        </div>
        <div>
          <!-- <el-button v-preventReClick type="primary"
                     @click="handleAction('BLLZ')">
            办理离职
          </el-button> -->
          <!-- <el-button v-preventReClick type=""
                     @click="handleAction('BLLZ')">
            办理离职
          </el-button> -->
        </div>
      </div>

      <div class="user flex">
        <div>
          <img class="img"
               v-if="UserData?.avatar"
               :src="UserData?.avatar"
               alt="">
          <img class="img"
               v-else
               src="../../assets/logo.jpg"
               alt="">
        </div>
        <div class="ml20 w100">
          <div class="flex title">
            <div class="name">{{ UserData?.userName }} </div>
            <!-- <div class=" smallText">{{UserData?.sex == 1 ? '女':'男'}}/{{UserData?.age}}岁</div> -->
            <div class="ml20">
              <el-button v-preventReClick
                         type="warning"
                         size="small"
                         plain
                         v-if="UserData?.type == 0"> 游客 </el-button>
              <el-button v-preventReClick
                         type="primary"
                         size="small"
                         plain
                         v-if="UserData?.type == 1"> 普通用户 </el-button>
              <el-button v-preventReClick
                         type="primary"
                         size="small"
                         v-if="UserData?.type == 2"> 会员用户 </el-button>
              <el-button v-preventReClick
                         type="success"
                         size="small"
                         plain
                         v-if="UserData?.type == 3"> 创客用户 </el-button>
            </div>
          </div>
          <div class="mt20 userData">
            <div class="smallText mb20 userList">联系电话<span class="text">：{{UserData?.phone}}</span></div>
            <div class="smallText mb20 userList">总收益<span class="text">：{{UserData?.totalMoney}}</span></div>
            <div class="smallText mb20 userList">当前余额<span class="text">：{{UserData?.currentMoney}}</span></div>
            <div class="smallText mb20 userList">已提现<span class="text">：{{UserData?.withdrawalMoney}}</span></div>
            <div class="smallText mb20 userList">所在城市<span class="text">：{{UserData?.resideCity}}</span></div>
            <div class="smallText mb20 userList">成为创客用户时间<span class="text">：{{UserData?.seedUserTime}}</span></div>
            <div class="smallText mb20 userList">下级用户数<span class="text">：{{UserData?.childUserCount}}</span></div>
            <div class="smallText mb20 userList">注册时间<span class="text">：{{UserData?.createdAt}}</span></div>
            <div class="smallText mb20 userList">业务员<span class="text">：{{UserData?.managerName}}</span></div>
          </div>
        </div>
      </div>
      <div class="mt20 f16 fb">下级信息</div>
      <div class="searchList mt20">
        <el-form :model="params"
                 ref="FormInstance"
                 class="boxFrom flex_sb">
          <div class="searchBox">
            <template v-for="(item, index) in totalInputColumns"
                      :key="index">
              <el-form-item v-if="item.type == 'input'">
                <el-input v-model="params[item.key]"
                          clearable
                          :placeholder="item.label"></el-input>
              </el-form-item>
            </template>
          </div>

          <el-form-item class="btns">
            <el-button v-preventReClick
                       type="primary"
                       plain
                       @click="handleAction('query')">搜索</el-button>
            <el-button v-preventReClick
                       @click="handleAction('reset')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-table :data="tableData"
                style="width: 100%"
                border
                v-loading="loading"
                :header-cell-style="{color:'#000'}">

        <el-table-column prop="userName"
                         label="姓名"
                         show-overflow-tooltip
                         align="center" />
        <el-table-column prop="bindTime"
                         label="绑定时间"
                         show-overflow-tooltip
                         align="center">
        </el-table-column>
        <el-table-column prop="phone"
                         label="手机号"
                         show-overflow-tooltip
                         align="center" />
        <el-table-column prop="commissionMoney"
                         label="获得推荐奖励"
                         show-overflow-tooltip
                         align="center" />
        <el-table-column prop="bonusMoney"
                         label="获得绩效奖励"
                         show-overflow-tooltip
                         align="center">
        </el-table-column>
        <el-table-column prop="status"
                         label="状态"
                         show-overflow-tooltip
                         align="center">
          <template #default="scope">
            <span v-if="scope.row.status == 0"
                  class="info">待入职</span>
            <span v-if="scope.row.status == 1"
                  class="primary">在职</span>
            <span v-if="scope.row.status == 2"
                  class="error">离职</span>
          </template>
        </el-table-column>
        <el-table-column prop="bindDays"
                         label="已经绑定时间"
                         show-overflow-tooltip
                         align="center">
        </el-table-column>
        <el-table-column prop="bonusAmount"
                         label="累积创收"
                         show-overflow-tooltip
                         align="center">
          <template #default="scope">
            <span>{{ ((scope.row.commissionMoney - 0) *100 + (scope.row.bonusMoney - 0) *100)/100 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="btns"
                         label="操作"
                         show-overflow-tooltip
                         align="center"
                         width="100"
                         fixed="right">
          <template #default="scope">
            <div class="flex_c btnsDatil">
              <div class="primary cup"
                   @click="handleAction('JB',scope.row)">解绑</div>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import chooseAddress from "@/components/map.vue";
import {
  defineComponent,
  onMounted,
  reactive,
  getCurrentInstance,
  ref,
  toRefs,
} from "vue";
import { useRouter, useRoute } from "vue-router";
import { ElLoading, ElMessageBox, ElMessage } from "element-plus";
export default defineComponent({
  components: {
    chooseAddress,
  },
  setup () {
    const app = getCurrentInstance()?.proxy;
    const router = useRouter();
    const route = useRoute();
    const initState = () => {
      return {
        loading: false,
        tableData: [],
        ruleForm: {
          cid: "",
          companyName: "",
          status: "",
          type: "",
          name: "",
          remark: "",
        },
        totalSize: 0,
        totalInputColumns: [
          { key: "nickName", label: "用户姓名/手机号", type: "input" },

        ],
        params: {
          pageNum: 1,
          userId: app.$route.query.id,
          pageSize: 10,
        },
        UserData: {},
      };
    };
    const state = reactive(initState());
    onMounted(() => {
      if (route.query.id) {
        methods.getUserData()
        methods.tableList()
      }
    });
    const methods = {
      handleAction (type, data) {
        switch (type) {
          case "query": //查询
            methods.tableList()
            break;
          case "reset": // 重置
            state.params = initState().params;
            break;
          case "JB": // 重置
            app.$get('userInfo/unBindUserList', { uid: state.UserData.id, childId: data.id }).then(res => {
              if (res.code == 200) {
                ElMessage.success('解绑成功')
                methods.tableList()
              }
            })
            break;

        }
      },
      // 用户数据
      getUserData () {
        app.$get('/userInfo/seedUserDetail?userId=' + route.query.id).then(res => {
          state.UserData = res.data
          console.log(state.UserData);
        })
      },
      // 列表数据
      tableList () {
        app.$post('/userInfo/seedChildUserinfoPage', state.params).then(res => {
          if (res.data) {
            state.totalSize = res.data.total
            state.tableData = res.data.list
          }
        })
      },
      //分页变化
      handleSizeChange () {
        state.params.pageNum = 1;
        methods.getDataList();
      },
      //表格翻页
      handleCurrentChange () {
        methods.getDataList();
      },

      back () {
        router.go(-1);
      },
      submit () {
        app.$refs.ruleFormRef.validate((valid) => {
          if (valid) {
            const loading = ElLoading.service({
              text: "加载中..",
            });
            let url = "/sys/role/modify/role";
            let data = JSON.parse(JSON.stringify(state.ruleForm));
            app.$http.post(url, data).then((res) => {
              if (res.code == 200) {
                ElMessage({
                  message: "成功保存",
                  type: "success",
                });
                router.go(-1);
              }
              loading.close();
            }).catch(() => {
              loading.close();
            });
          }
        });
      },

    };
    return {
      ...toRefs(state),
      ...methods,
    };
  },
});
</script>

<style lang="scss" scoped>
.el-table {
  overflow: hidden;
}
.pagination {
  margin-top: 20px;
  height: 50px;
  display: flex;
  justify-content: flex-end;
}
.add {
  .demo-ruleForm {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  .top {
    .ruturn {
      color: rgba(121, 121, 121, 1);
      font-size: 16px;
      position: relative;
      margin-left: 10px;
      margin-top: -2px;
    }
    .ruturn::before {
      content: '';
      position: absolute;
      left: 50px;
      top: 4px;
      width: 1px;
      height: 16px;
      background: rgba(121, 121, 121, 0.8);
    }
    .left {
      align-items: center;
    }
    .title {
      color: rgb(83, 83, 83);
      font-size: 16px;
      margin-left: 40px;
      font-weight: bold;
    }
  }
  .title {
    align-items: center;
  }
  .user {
    margin-top: 40px;
    font-size: 14px;
    .w100 {
      width: 100%;
    }
    .userData {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
    }
    .userList {
      width: 25%;
      text-align: left;
    }
    .smallText {
      color: #999;
    }
    .text {
      color: #000;
    }
    .name {
      font-size: 16px;
    }
    .img {
      border-radius: 50%;
      width: 120px;
      height: 120px;
    }
  }
}
.el-tabs {
  height: 100%;
  ::v-deep(.el-tabs__content) {
    height: calc(100% - 40px);
  }
}
.el-tab-pane {
  display: flex;
  height: 100%;
  flex-direction: column;
  ::v-deep(.el-table) {
    flex: 1;
  }
}
</style>
